<template>
    <div class="changePage">
        <div class="title">
            <div>
                <i v-if="rechangeType != 2" @click="store.$patch({ rechangeType: 2 })">
                    <el-icon size="14" color="#b5bac8">
                        <ArrowLeft />
                    </el-icon>
                </i>
                <template v-if="store.isRecord == 0">
                    <span v-if="store.rechangeType == 0">{{ $t('language.rechange.fiat') }}</span>
                    <span v-else-if="store.rechangeType == 1">{{ $t('language.rechange.deposit') }}</span>
                    <!-- <span v-else-if="store.rechangeType == 2">{{ $t('language.rechange.record') }}</span> -->
                    <span v-else>{{ $t('language.rechange.options') }}</span>
                </template>
                <template v-else>
                    <!-- <span v-if="store.rechangeType == 0">{{ $t('language.rechange.fiat') }}</span>
                    <span v-else-if="store.rechangeType == 1">{{ $t('language.rechange.deposit') }}</span>
                    <span v-else-if="store.rechangeType == 2">{{ $t('language.rechange.record') }}</span>
                    <span v-else>{{ $t('language.rechange.rechangeOrder') }}</span> -->
                    <span >{{ $t('language.rechange.record') }}</span>
                </template>


            </div>
            <strong @click="store.$patch({ rechange: false })">
                <el-icon color="#fff" size="18">
                    <CloseBold />
                </el-icon>
            </strong>
        </div>
        <dl v-if="rechangeType == 2">
            <dd @click="store.$patch({ rechangeType: 1 })">
                <h3>{{ $t('language.rechange.crypto') }}</h3>
                <NuxtImg src="/img/T.png" alt="" />
            </dd>
            <dd @click="store.$patch({ rechangeType: 0 })">
                <h3>{{ $t('language.rechange.fiat') }}</h3>
                <NuxtImg src="/img/pix.png" alt="" />
            </dd>
        </dl>
        <!-- <component :loading="loading" :is="rechangeType == 0 ? BRL :rechangeType == 1?USDT:''" /> -->
        <!-- <BRL v-if="rechangeType == 0" />
        <USDTTTT v-else-if="rechangeType == 1" />
        <ORDER v-else-if="rechangeType == 3"/> -->
        <WalletchildRechangeBRL v-if="rechangeType == 0" />
        <WalletchildRechangeUSDT v-else-if="rechangeType == 1" />
        <WalletchildOrder v-else-if="rechangeType == 3" />
    </div>

</template>

<script setup lang="ts">
import { CloseBold, ArrowLeft } from '@element-plus/icons-vue'
import {shallowRef,computed} from "vue"
// import BRL from "./rechangeBRL.vue";
// import USDTTTT from "./rechangeUSDT.vue";
// import ORDER from "./order.vue";
const store = useStore()
let loading = shallowRef<boolean>(false)
let rechangeType = computed((): number => store.rechangeType)
</script>

<style scoped lang="scss">
.changePage {
    width: 100%;
    height: 100%;
    @include flex(column, flex-start, center);

    .title {
        width: 100%;
        height: 55px;
        @include flex(row, space-between, center);
        background-color: rgb(35, 38, 42);
        padding: 0 16px;

        div {
            @include flex(row, flex-start, center);

            .el-icon {
                margin: 0;
            }

            i {
                width: 25px;
                height: 25px;
                cursor: pointer;
                @include flex(row, center, center);
                background: #1c1f21;
                border-radius: 5px;
                margin-right: 10px;
            }

            span {
                color: #b5bac8;
                font-size: 18px;
            }
        }


        strong {
            height: 28px;
            width: 28px;
            border-radius: 16px;
            @include flex(row, center, center);
            border: 2px solid #fff;
            cursor: pointer;
        }
    }

    dl {
        width: 100%;
        padding: 20px;

        dd {
            width: 100%;
            background-color: #fff;
            width: 100%;
            height: 120px;

            border-radius: 10px;
            margin-bottom: 26px;
            transition: opacity .3s ease;
            box-sizing: border-box;
            cursor: pointer;
            @include flex(column, center, center);

            &:hover {
                opacity: 0.7;
            }

            h3 {
                color: #fff;
                font-size: 20px;
            }

            img {
                height: 25px;
                margin-top: 20px;
            }
        }

        dd:nth-child(1) {
            background-color: #128932;

        }

        dd:nth-child(2) {
            margin-top: 20px;
            background-color: #157979;
        }
    }
}
</style>